<template>
	<view class="page-content pt20 c255">
		
		<u-navbar back-icon-color="#ffffff" title=" " :background="background" :border-bottom="false" :is-back="true">
		
		</u-navbar>
		<view class="pl18">
			<swiper @change="handleTab" :current="tabCur" next-margin="20rpx" style="height: 340rpx;">
				<swiper-item v-for="(item,index) in 4" :key="index">
					<view class="module-level pr10">
						<image class="img"
							src="https://diy.cdevelopment.cn/admin-api/infra/file/18/get/28ef8c30cc231d34ccb9a669fc56c9ef877b4fcb9a530603334d6d0dbe36c556.png"
							mode="widthFix"></image>
						<view class="level-content" :class="'level-content'+tabCur">
							<view class="fz12 u-font-bold u-flex u-f-jsb mt10">
								<span></span>
								<span class="btn-sign fz13 u-font-bold">签到</span>
							</view>
							<view class="fz12 u-font-bold u-flex u-f-jsb mt12">
								会员积分1350
								<span>已连续签到1天</span>
							</view>

							<view class="fz12 mt20">
								<view class="u-flex u-f-jsb mb4">
									V1
									<span>V2</span>
								</view>
								<u-line-progress height="16" :show-percent="false" active-color="#6BB3D4"
									:percent="70"></u-line-progress>
								<view class="fz12 mt2">还需消费500元可升级至V2</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="mt30 pl18 pr18 pb50">

			<view class="fz14 u-font-bold" style="position: relative;">
				<span class="c255"
					style="position: absolute;left: 50%;transform: translateX(-50%);top: -16rpx;">会员权益</span>
				<image src="../../../static/image/ic-v-line.png"
					style="width: 472rpx;height: 2px;display: block;margin: 0 auto;"></image>
			</view>
			<view class="mt18 u-flex" style="flex-wrap: wrap;">
				<view class="mt24 item-eqity" v-for="(item, index) in actionList" :key="index">

					<image :src="item.img" mode="aspectFill" style="width: 80rpx;height: 80rpx;">
					</image>
					<view class="mt8">
						<view class="fz12 c255">{{item.title}}</view>

					</view>

				</view>
			</view>
			<view class="u-flex u-f-justify mt20 fz11">
				会员权益说明
				<u-icon name="arrow-right" class="ml4 fz12"></u-icon>
			</view>

			<view class="brs8 mt30 p15" style="background: rgba(255,255,255,0.05);">
				<view class="u-flex u-f-jsb">
					<view class="fz14 u-font-bold" style="">积分获取</view>
					<view class="fz12">前往积分商城

						<u-icon name="arrow-right" class="ml4 fz12"></u-icon>
					</view>
				</view>
				<view class="fz12 mt10 lh21">
					① 每日签到得1积分，连签10天得10积分；</br>
					 ② 每日在社区中心完成评论得10积分；</br>
					  ③ 分享作品得20积分；</br>
					   ④ 每消费1元得20积分；</br>
						⑤ 积分商城抽奖获取。
				</view>
			</view>
			<view class="mt20">
				<view class="fz12 u-font-bold">
					会员等级说明
				</view>
				<view class="fz12 mt14 lh21">
					普通会员：成功注册账号即成为普通会员。</br>
					银卡会员：累计消费6次且消费金额达到600元。</br>
					金卡会员：累计消费15次且消费金额达到1300元。</br>
					钻卡会员：累计消费15次且消费金额达到3880元。</br>
					黑卡会员：累计消费30次且消费金额达到8888元。
				</view>
			</view>
		</view>

		<!-- <view class="mt30">

			<view class="fz17 btn-quanyi">会员专属客服</view>
			<view class="mt18 u-flex u-f-jsb">
				<view class="u-flex fz17 item-ke">
					<button class="kefu-btn" open-type="contact">
						联系客服
					</button>
					<image src="../../static/image/vip-lian1.png" mode="aspectFill" style="width:50rpx;height: 34rpx;display: block;margin-right: 16rpx;">
					</image>
					在线咨询
				</view>
				<view class="u-flex fz17  item-ke  item-ke1">
					<image src="../../static/image/vip-lian2.png" mode="aspectFill" style="width:37rpx;height: 37rpx;display: block;margin-right: 16rpx;">
					</image>
					专属热线
				</view>
			</view>
		</view> -->
		<!-- <view class="fz12 mt20 mb30" style="color: #F0E3CC;" @click="isAgree=!isAgree">
			<u-icon name="checkmark-circle-fill" size="32" v-if="isAgree"></u-icon>
			<u-icon name="checkmark-circle" size="32" v-else></u-icon>
			<span class="ml4">我已阅读并同意</span>
			<span @tap.stop="$util.goUrl({url:`/user/pages/protocol`})" >
				《易仲网用户服务协议》
			</span><span @tap.stop="$util.goUrl({url:`/user/pages/information`})" >
				《隐私政策》
			</span><span @tap.stop="$util.goUrl({url:`/user/pages/information`})">
				《易仲网会员服劳协议》
			</span>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				isAgree: false,
				baseUrl: this.$config.apiBaseUrl,
				vipShu: this.$config.apiBaseUrl + 'static/wx/image/vip-sbg.png',
				isLogin: false,
				background: {
					background:''
				},
				member_type: [],
				infoList: [],
				actionList: [{
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}, {
					title: '购物积分',
					path: '',
					img: '../../../static/image/ic-v1.png'

				}],
				userInfo1: {}
			}
		},
		onLoad() {},
		onShow() {
			if (this.$db.get("userToken")) {
				this.getList()
			}
		},

		methods: {
			getList() {},
			handleTab(e) {
				this.tabCur = e.detail.current
				this.getList()
			},
			getInfo() {},
			toCreated() {
				let item = this.member_type[this.tabCur]
				let post = {
					mc_id: item.mc_id,
					from: 'routine',
					pay_type: 'weixin',
					type: 1,
					member_type: item.type,
					money: item.price,
					price: item.pre_price,
				}
				this.$api.cardCreate(post, res => {
					if (res.status == 200) {


						let info = res.data.result.jsConfig
						// 唤起微信支付。
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timestamp,
							nonceStr: info.nonceStr,
							package: info.package,
							signType: info.signType,
							paySign: info.paySign,
							success: (res) => {

								uni.showToast({
									title: '支付成功',
									duration: 2000
								});
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							},
							fail: (err) => {}
						});
					} else {

						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 扫码
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log(res, 1111111)
						uni.redirectTo({
							url: '/' + res.path
						})

					}
				});
			},
			// 关于我们
			goAgreement() {
				let articleId = this.$store.state.config.about_article_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			toPage(url) {
				if (!this.isLogin) {
					this.$common.errorToShow('请先登录！')
					uni.navigateTo({
						url: '/pages/login/register'
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background: linear-gradient(135deg, #28302C 0%, #101514 100%);
		min-height: 100vh;
	}

	.module-card {
		padding: 50rpx 0 42rpx;
		background: linear-gradient(90deg, #303145, #44495E);
		box-shadow: 0px 11px 62px 0px rgba(21, 21, 34, 0.67);
	}

	.btn-sign {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 10rpx 38rpx;
	}

	.module-level {
		position: relative;
		height: 340rpx;

		.img {
			display: block;
			width: 100%;
		}

		.level-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 25rpx 34rpx;
		}

		.level-content0 {
			color: #6BB3D4;
		}
	}

	.btn-open {
		width: 570rpx;
		line-height: 82rpx;
		text-align: center;
		color: #222231;
		border-radius: 50rpx;
		margin: 54rpx auto 0;
		background: linear-gradient(90deg, #ECBD83, #F8D9AD);

	}

	.shu-item {

		background-size: contain;
		height: 160rpx;
	}

	.item-ke {
		width: 300rpx;
		height: 72rpx;
		color: #222231;
		background: #F0E3CC;
		align-items: center;
		position: relative;
		justify-content: center;
		border-radius: 0 0 0 40rpx;
	}

	.item-ke1 {
		border-radius: 0 0 40rpx 0;
	}

	.kefu-btn {
		position: absolute;
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.item-eqity {
		width: 33.33%;
		text-align: center;

	}
</style>